<template>
<div>
<div id="main" style="width:200px;height:300px;"></div>

 <el-row>
    <el-col :span="10"><div class="grid-content ep-bg-purple-dark" />
    <ul>
      <h1>展示</h1>
   {{data}}
    </ul>
    </el-col>

 </el-row>



</div>
</template>

<script lang="ts" setup>
import {ref,onMounted}  from 'vue'





//搜索用的
const socket = ref(null)
const data = ref()





const initwesockt=()=>{
    socket.value = new WebSocket("ws://127.0.0.1:8000/room/1/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{

        data.value=event.data
        console.log(event.data)
        //data {"name":'zs',"id":1}

        //mlist.value.push(data)
    }

    // // 当断开连接时，触发该函数
    // this.socket.onclose =function (event){
    // let tag = document.createElement("div");
    // tag.innerText = "[连接断开]";
    // document.getElementById("message").appendChild(tag);
    // }


}

onMounted(()=>{
    initwesockt()
})
</script>


